// Test out a custom font

@use "sass:math";

// TODO: Figure out how to get this in a global spot
$font-family-sans-serif: 'OpenSans-Light';  // apply custom font
$fonts-url-path: './assets/fonts';
@font-face {
  font-family: 'OpenSans-Light';
  src: url('#{$fonts-url-path}/OpenSans-Light.ttf') format('truetype');
}
.heading {
  font-family: $font-family-sans-serif;
}

// Small image is url encode
$check-svg: url("./assets/images/guest-list-accepted.png");
$check-size: 132px;
.check {
  display: inline-block;
  background: $check-svg;
  background-size: $check-size $check-size;
  width: $check-size;
  height: $check-size;
}

// Relative path of larger image
$last-call-svg: url("./assets/images/last-call.png");
$last-call-width: 1440px;
$last-call-height: 373px;

.lastCall {
  display: inline-block;
  background: $last-call-svg;
  background-size: math.div($last-call-width, 2) math.div($last-call-height, 2);
  width: math.div($last-call-width, 2);
  height: math.div($last-call-height, 2);
}

// This is an absolute path to the image, defined in app-variables.scss
$images-url-path: './assets/images';

$rails-on-maui-width: 140px;
$rails-on-maui-height: 40px;
$rails-on-maui-png: url("#{$images-url-path}/logos/railsonmaui.png");

.railsOnMaui {
  display: inline-block;
  background: $rails-on-maui-png;
  background-size: $rails-on-maui-width $rails-on-maui-height;
  width: $rails-on-maui-width;
  height: $rails-on-maui-height;
}
